<template>
  <div class="dashboard-container">
    <div class="container">
      <div class="case">
        <div style="width: 400px; margin: 30px;">
          <el-skeleton style="width:400px" animated :count="3">
            <template slot="template">
              <el-skeleton-item
                variant="image"
                style="width: 400px; height: 267px;"
              />
              <div style="padding: 14px;">
                <el-skeleton-item variant="h3" style="width: 50%;" />
                <div
                  style="display: flex; align-items: center; justify-items: space-between; margin-top: 16px; height: 16px;"
                >
                  <el-skeleton-item
                    variant="text"
                    style="margin-right: 16px;"
                  />
                  <el-skeleton-item variant="text" style="width: 30%;" />
                </div>
              </div>
            </template>
            <template>
              <el-card
                :body-style="{ padding: '0px', marginBottom: '1px' }"
                style="margin-bottom: 50px;"
                v-for="item in lists"
                :key="item.name"
              >
                <img :src="item.imgUrl" class="image multi-content" />
                <div style="padding: 14px;">
                  <span>{{ item.name }}</span>
                  <div class="bottom card-header">
                    <span class="time">{{ currentDate }}</span>
                    <el-button type="text" class="button" @click="testCase()"
                      >开始学习</el-button
                    >
                  </div>
                </div>
              </el-card>
            </template>
          </el-skeleton>
        </div>
      </div>
    </div>
  </div>
</template>

<style>
.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 100%;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: '';
}

.clearfix:after {
  clear: both;
}
</style>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
    .container {
      background: #fff;
      position: relative;
      z-index: 1;
      padding: 0 30px;
      border-radius: 4px;
      // min-height: 650px;
      height: calc(100% - 55px);
      overflow: hidden;
      .case {
        display: flex;
        gap: 100px; /* 在flex子项之间添加100px的间隔 */
        justify-content: center;
        align-items: center;
      }
    }
    }
  }
</style>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'

@Component({
  name: 'test',
  components: {}
})
export default class extends Vue {
  private currentDate: string = new Date().toLocaleDateString()
  private lists: any = [
    {
      imgUrl:
        'https://www.keneuc.cn/uploads/allimg/20230212/1-2302121H22a48.jpg',
      name: '人脸比对'
    },
    {
      imgUrl:
        'https://ai-bot.cn/wp-content/uploads/2023/04/what-is-sentiment-analysis-1.png',
      name: '情感分析'
    },
    {
      imgUrl:
        'https://www.kuaishang.cn/uploads/allimg/210520/5-210520152245238.jpg',
      name: '智能问答'
    }
  ]
  // 开始
  private testCase() {
    this.$router.push({ path: '/caseRec/face' })
  }
}
</script>
